<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>抽屉式相册</title>
	</head>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		
		body {
		    height: 100vh;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background-color: #000;
		}
		
		.box {
		    width: 1200px;
		    height: 550px;
		    display: flex;
		    flex-direction: row;
		    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
		}
		
		.img-box {
		    width: 100px;
		    height: 550px;
		    overflow: hidden;
		    transition: 0.3s;
		}
		
		.img-box img {
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    object-position: 50% 20%;
		}
		
		.img-box:nth-child(5) {
		    width: 800px;
		}
		
		.img-box:hover {
		    width: 800px;
		}
		
		.img-box:hover~.img-box:nth-child(5) {
		    width: 100px;
		}
		
		* {
		    margin: 0;
		    padding: 0;
		}
		
		body {
		    height: 100vh;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background-color: #000;
		}
		
		.box {
		    width: 1200px;
		    height: 550px;
		    display: flex;
		    flex-direction: row;
		    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
		}
		
		.img-box {
		    width: 100px;
		    height: 550px;
		    overflow: hidden;
		    transition: 0.3s;
		    cursor: pointer;
		}
		
		.img-box img {
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    object-position: 50% 20%;
		}
		
		.img-box:nth-child(5) {
		    width: 800px;
		}
		
		.img-box:hover {
		    width: 800px;
		}
		
		.img-box:hover~.img-box:nth-child(5) {
		    width: 100px;
		}
	</style>
	<body>
		<div class="box">
			<div class="img-box">
				<img src="./images/1.jpg" alt="">
			</div>
			<div class="img-box">
				<img src="./images/2.jpg" alt="">
			</div>
			<div class="img-box">
				<img src="./images/3.jpg" alt="">
			</div>
			<div class="img-box">
				<img src="./images/4.jpg" alt="">
			</div>
			<div class="img-box">
				<img src="./images/5.jpg" alt="">
			</div>
		</div>
	</body>

</html>